﻿FlyTalk.views.ColumnView = Ext.extend(Ext.Panel, {

	//scroll: true,
	title: 'column',
	layout: 'vbox',
	scroll: true,
	//fullscreen: true,
	
    initComponent: function (options) { 	
		// list
		this.MixedStore = new Ext.data.JsonStore({
			model : 'MixedPostModel',
		});
		
		this.tweetList = new Ext.List({
			//fullscreen: true,
		
		//	cls: 'feeds',
			emptyText: '<div style="margin:5px;">No tweets cached.</div>',
			itemTpl : [ 
                   '<div id="touchpoint_container_{type}_{answered}">',
                        '<tpl for=".">',
                            '<div class="touchpoint_data">',
								'<div class="touchpoint_icon">',
									'<img width="44" height="44" src="{image_url}"/>',
								'</div>',
                            
								'<div class="touchpoint_content_{type}">',
									'<span class="touchpoint" style="padding-right: 10px">{from_user}</span>{flight}<br />',
									 '{text}',
									'<div style="color:#999; font-size: 11px;">{language}</div>',
									
								'</div>',
							
							'<div class="plus_{answered}" style="position: relative; top: 12px" >',
								'<img src="images/plus_post.png" >',
							'</div>',
							
							'<div style="padding: 2px; color:#999; font-size: 11px; float: left; width: 150px;">',
								
								'<div >',
								
									'<div style="padding-right:10px; float:left">{date}</div>',
									'<div style="padding-right:10px; float:left">{up} <img src="images/thumbsUP_postscopy{rated}.png" width="10px" /> / {down} <img src="images/thumbsDown_postscopy{rated}.png" width="10px" /></div>',
									'{tp}',
									'<div style="padding-right:10px; float:left">{followed}</div>',
									//'<div style="padding-right:10px; float:left">{followed}</div>',
								'</div>',
	
									
							'</div>',
							
							'<div class="clear"></div>',
							
                            '</div>',
                        '</tpl>',
                    '</div>'
//'<div id="touchpoint_container_{type}_{answered}">',
//'<tpl for=".">',
//    '<div class="touchpoint_data">',
//		'<div class="touchpoint_content_{type}" style="width:100%">',
//			'<span style="padding-right: 10px">{text} </span><br>',
//			'<span style="color: #bfbfbf">suggested by</span> <span style="padding-right: 10px" class="touchpoint" >{from_user}</span>{flight}</span>',
//			
//			'<div style="color:#999; font-size: 11px;">{language}</div>',
//			
//		'</div>',
//	
//	'<div class="plus_{answered}"  style="position: relative; top: 15px" >',
//		'<img src="images/plus_post.png">',
//	'</div>',
//	
//	'<div style="padding: 2px; color:#999; font-size: 11px; float: left; width: 150px;">',
//		
//		'<div >',
//		
//			'<div style="padding-right:10px; float:left">{date}</div>',
//			'<div style="padding-right:10px; float:left">{up} <img src="images/thumbsUP_postscopy{rated}.png" width="10px" /> / {down} <img src="images/thumbsDown_postscopy{rated}.png" width="10px" /></div>',
//			'{tp}',
//			'<div style="padding-right:10px; float:left">{followed}</div>',
//			//'<div style="padding-right:10px; float:left">{followed}</div>',
//		'</div>',
//
//			
//	'</div>',
//	
//	'<div class="clear"></div>',
//	
//    '</div>',
//'</tpl>',
//'</div>'
			],
			grouped : false,
			indexBar: false,
			width: 320,
			flex:1,
		//	onItemDisclosure: true,
			store: this.MixedStore,
			
			
			listeners:{
				itemTap: function(dv, index, tweet, e){
					if(e.getTarget('.touchpoint_icon')){
						//alert(FlyTalk.views.ColumnView.MixedStore.getAt(index).data.from_user);
						if(FlyTalk.views.ColumnView.MixedStore.getAt(index).data.from_user == "JoaoDias"){		
							FlyTalk.views.mainView.setActiveItem(FlyTalk.views.PublicProf);
						}		
					}
					else if(e.getTarget('.plus_') || e.getTarget('.plus_yes')){
						FlyTalk.views.ColumnView.onMenu(index);
						
					}	
				},
			},
		});
	
		this.items = [
		             {
		            	    xtype: 'selectfield',
		            	    name: 'sortby',
		            	    //id: 'sortposts',
		            	    options: [
		            	        {text: 'People from my flight', value: 'getFlightPost'},
		            	        {text: 'Official notifications',  value: 'getOfficialPost'},
		            	    	{text: 'Request for help',  value: 'getCustomPost'},
		            	    	{text: 'People at the airport', value: 'getTerminalPost'},
			            	    {text: 'People who speak my language', value: 'getLangPost'},
		            	      	{text: 'Customize...',  value: 'getCustomPost'},
		            	    ],
		            	    width: '100%',
		            	    height: 44,
		            	    hidden: true,
		            	    listeners:{
		        				change: function(select, opt){
		        					if(opt == 'getFlightPost' || opt == 'getOfficialPost' || opt == 'getTerminalPost' ){
		        						//alert(opt);
			        					Ext.dispatch({
			        		                controller: FlyTalk.controllers.dbController,
			        		                action: 'getSpecificPost',
			        		                method: opt,
			        		            });
		        					}
		        					else{
		        						FlyTalk.views.BoredView.incomplete.show();
		        					}
		        					
		        					
//		        					Ext.dispatch({
//		        		                controller: FlyTalk.controllers.dbController,
//		        		                action: opt,
//		        		            });
		        				},
		        			},
		             },
		              this.tweetList];
		
		FlyTalk.views.ColumnView.superclass.initComponent.call(this);
    },
    
    onMenu: function (ind) {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openMenu',
           // post: record,
            index: ind,
        });
    },
    
});